<template>
	<div class="container">
	  <div class="header">
		<p style="text-align: center">分类</p>
	  </div>
	  <div class="content">
		<div class="left hidescroll">
		  <ul class="list-main">
			<li v-for="item in listMain" :key="item.id" @click="activeId = item.id">
			  <span :class="{ active: item.id === activeId }" v-text="item.name"></span>
			</li>
		  </ul>
		</div>
		<div class="right">
		  <img :src="avatar" alt="" class="logo1">
		  <ul v-if="listSub.length > 0" class="list-sub">
			<li v-for="item in listSub" :key="item.id">
			  <router-link :to="/list/ + item.id">
				<img :src="item.avatar" alt="">
				<span class="span" v-text="item.name"></span>
			  </router-link>
			</li>
		  </ul>
		  <p v-else>暂无相关商品，敬请期待。。。</p>
		</div>
	  </div>
	  <div class="footer2">
		<MiNav></MiNav>
	  </div>
	</div>
  </template>
  <script>
  
  import MiNav from "../../components/MiNav/MiNav"
  import { CategoryApi } from '../../api'
  
  export default {
	components: { MiNav },
	name: "category",
	//注册子组件
	data() {
	  return {
		listMain: [],
		listSub: [],
		activeId: 0
	  };
	},
  
	computed: {
	  
	  avatar: function () {
		return this.activeId > 0 ? this.listMain.find(item => item.id === this.activeId).avatar : "";
	  }
	},
	methods: {
	 
	  async getData(fid) {
		try {
		  const result = await CategoryApi.getList(fid)
		  if (this.activeId === 0) {
			this.listMain = result;
			this.activeId = result[0].id;
		  } else {
			this.listSub = result
		  }
		} catch (e) {/**/
		}
	  }
  
	},
	watch: {
	  activeId: {
		handler: function (newValue) {
		  this.getData(newValue);
		},
		immediate: true 
	  }
	}
  };
  </script>
  <style scoped>
  * {
	margin: 0;
	padding: 0;
  }
  
  ul {
	list-style: none;
  }
  
  .hidescroll::-webkit-scrollbar {
	display: none
  }
  
  .container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
  }
  
  .header {
	height: 45px;
	flex-shrink: 0;
  }
  
  .content {
	flex-grow: 1;
	display: flex;
	border-top: 1px solid #b0b0b0;
	border-bottom: 1px solid #b0b0b0;
	overflow: hidden
  }
  
  .left {
	width: 90px;
	flex-shrink: 0;
	overflow: auto
  }
  
  .right {
	flex-grow: 1;
	border-left: 1px solid #b0b0b0;
	overflow: auto;
	padding: 5px;
  }
  
  .logo1 {
	width: 100%;
  }
  
  .footer2 {
	flex-shrink: 0;
  }
  
  ul.list-main li {
	height: 45px;
	display: flex;
	padding: 0 12px;
	align-items: center;
  
  }
  
  ul.list-main span {
	flex-grow: 1;
	font-size: 14px;
	text-align: center;
	height: 26px;
	line-height: 26px;
	border-radius: 13px;
  }
  
  ul.list-main span.active {
	color: white;
	background-color: orange;
  }
  
  .list-sub {
	width: 73vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
  }
  
  .list-sub li {
	width: 19vw;
	margin-left: 10px;
	margin-top: 10px;
	text-align: center;
  }
  
  .list-sub li img {
	width: 69px;
  }
  .span{
	color: #696969;
  }
  </style>